<template>
  <div class="saveAddress">
    <div class="divHead">
      <div class="divTitle">
        <ArrowLeft @click="router.back()" style="width: 5vw; height: 5vh;" />
        <span>新增收货地址</span>
      </div>
    </div>

    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" size="large" class="demo-ruleForm"
      status-icon>
      <el-form-item label="联系人：" prop="consignee">
        <el-input v-model="ruleForm.consignee" placeholder="请输入" style="width: 90%;" />
      </el-form-item>

      <el-form-item label="性别：" prop="sex">
        <el-radio-group v-model="ruleForm.sex" class="ml-4">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="0">女</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="手机号：" prop="phone">
        <el-input v-model="ruleForm.phone" placeholder="请输入" style="width: 90%;" />
      </el-form-item>

      <el-form-item label="收货地址：" prop="detail">
        <el-input v-model="ruleForm.detail" placeholder="请输入" style="width: 90%;" />
      </el-form-item>

      <el-form-item label="标签：" prop="label">
        <el-radio-group v-model="ruleForm.label">
          <el-radio-button label="无" />
          <el-radio-button label="公司" />
          <el-radio-button label="家" />
          <el-radio-button label="学校" />
        </el-radio-group>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)"
          style="width: 80%; margin-top: 30px; background-color: #ffc200; border-color: #ffc200; color: #333333; font-size: 20px; border-radius: 20px;">
          保存地址
        </el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script setup lang="ts" name="saveAddress">
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
import { Iaddress } from './interface'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { saveAddress } from '@/api/index'

const router = useRouter()

const ruleForm = ref<Iaddress>({
  consignee: '',
  sex: 1,
  phone: '',
  detail: '',
  label: ''
})

const rules = reactive<FormRules>({
  consignee: [{ required: true, message: '必填', trigger: 'blur' },],
  sex: [{ required: true, message: '必填', trigger: 'change' },],
  phone: [{ required: true, message: '必填', trigger: 'blur' },],
  detail: [{ required: true, message: '必填', trigger: 'blur' },],
  label: [{ required: true, message: '必填', trigger: 'change' },],
})

const ruleFormRef = ref<FormInstance>()

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        const res = await saveAddress(ruleForm.value)
        ElMessage.success('新增成功')
        router.back()
      } catch (error) {
        ElMessage.error(error as string)
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

</script>

<style scoped lang="scss">
.saveAddress {
  width: 100%;
  height: 100vh;
  background-color: #f3f2f7;

  .divHead {
    width: 100%;
    height: 15%;
    opacity: 1;
    background: #333333;
    box-sizing: border-box;
    padding-left: 3vw;
    padding-right: 3vw;

    .divTitle {
      // height: 50%;
      padding-top: 10%;
      display: flex;
      align-items: center;
      text-align: center;
      font-size: 23px;
      color: #fff;

      span {
        flex: 1;
      }
    }
  }

  .el-form {
    box-sizing: border-box;
    width: 100%;
    height: 85%;
    // background-color: #fff;
    padding: 10px;

    ::v-deep .el-form-item--large .el-form-item__label {
      font-size: 16px !important;
    }
  }
}
</style>